<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Radio 单选框 - Easy Frame</title>
    <meta name="description" content="Updates and statistics">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!--str:::全局css -->
    <link href="/assets/plugins/global/plugins.bundle.css" rel="stylesheet" type="text/css"/>
    <link href="/assets/css/demo1/style.bundle.css" rel="stylesheet" type="text/css"/>
    <!--end::全局css -->

    <link rel="shortcut icon" href="/assets/media/logos/favicon.ico"/>
</head>
<body class="e-page--loading">
<div class="e-content">
    <div class="row">
        <div class="col-md-6">
            <!--begin::Portlet-->
            <div class="card">
                <div class="card-head">
                    <div class="card-head-label">
                        <h3 class="card-head-title">基础</h3>
                    </div>
                </div>
                <div class="card-body">
                    <!--begin::Form-->
                    <form class="e-form">
                        <div class="form-group">
                            <label>默认</label>
                            <div class="e-radio-list">
                                <label class="e-radio">
                                    <input type="radio"> Default
                                    <span></span>
                                </label>
                                <label class="e-radio">
                                    <input type="radio"> Option 2
                                    <span></span>
                                </label>
                                <label class="e-radio e-radio--disabled">
                                    <input type="radio" disabled=""> Disabled
                                    <span></span>
                                </label>
                                <label class="e-radio">
                                    <input type="radio" checked="checked"> Checked
                                    <span></span>
                                </label>
                            </div>
                        </div>
                    </form>
                    <!--end::Form-->
                </div>
            </div>
            <!--end::Portlet-->

            <!--begin::Portlet-->
            <div class="card">
                <div class="card-head">
                    <div class="card-head-label">
                        <h3 class="card-head-title">表单</h3>
                    </div>
                </div>
                <div class="card-body">
                    <!--begin::Form-->
                    <form class="e-form">
                        <div class="e-section">
                            <div class="e-section-info">
                                你可以将<code>radio</code>放到<code>.e-radio-list</code>中实现<code>radio</code>竖向排列
                            </div>
                            <div class="e-section-content">
                                <div class="form-group row">
                                    <label class="col-3 col-form-label">竖向</label>
                                    <div class="col-9">
                                        <div class="e-radio-list">
                                            <label class="e-radio">
                                                <input type="radio"> 选项 1
                                                <span></span>
                                            </label>
                                            <label class="e-radio">
                                                <input type="radio"> 选项 2
                                                <span></span>
                                            </label>
                                            <label class="e-radio">
                                                <input type="radio" checked="checked"> Checked
                                                <span></span>
                                            </label>
                                            <label class="e-radio e-radio--disabled">
                                                <input type="radio" disabled=""> Disabled
                                                <span></span>
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="e-separator e-separator--dashed"></div>
                            <div class="e-section-info">
                                你可以将<code>radio</code>放到<code>.e-radio-inline</code>中实现<code>radio</code>横向排列
                            </div>
                            <div class="e-section-content">
                                <div class="form-group row">
                                    <label class="col-3 col-form-label">横向</label>
                                    <div class="col-9">
                                        <div class="e-radio-inline">
                                            <label class="e-radio">
                                                <input type="radio"> 选项 1
                                                <span></span>
                                            </label>
                                            <label class="e-radio">
                                                <input type="radio"> 选项 2
                                                <span></span>
                                            </label>
                                            <label class="e-radio">
                                                <input type="radio"> 选项 3
                                                <span></span>
                                            </label>
                                        </div>
                                        <span class="form-text text-muted">请至少选择1项</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                    <!--end::Form-->
                </div>
            </div>
            <!--end::Portlet-->
        </div>
        <div class="col-md-6">
            <!--begin::Portlet-->
            <div class="card">
                <div class="card-head">
                    <div class="card-head-label">
                        <h3 class="card-head-title">状态色</h3>
                    </div>
                </div>
                <div class="card-body">
                    <!--begin::Form-->
                    <form class="e-form">
                        <div class="e-section">
                            <div class="e-section-info">默认</div>
                            <div class="e-section-content">
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="e-radio-list">
                                            <label class="e-radio">
                                                <input type="radio"> Default
                                                <span></span>
                                            </label>
                                            <label class="e-radio">
                                                <input type="radio" checked="checked"> Checked
                                                <span></span>
                                            </label>
                                            <label class="e-radio e-radio--disabled">
                                                <input type="radio" disabled="disabled"> Disabled
                                                <span></span>
                                            </label>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="e-radio-list">
                                            <label class="e-radio e-radio-success">
                                                <input type="radio"> Success state
                                                <span></span>
                                            </label>
                                            <label class="e-radio e-radio-danger">
                                                <input type="radio"> Danger state
                                                <span></span>
                                            </label>
                                            <label class="e-radio e-radio-brand">
                                                <input type="radio"> Brand state
                                                <span></span>
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="e-separator e-separator--dashed"></div>

                            <div class="e-section-info">你可以在<code>.e-radio</code>上添加<code>.e-radio--bold</code>设置<code>radio</code>使用加粗边框</div>
                            <div class="e-section-content">
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="e-radio-list">
                                            <label class="e-radio e-radio--bold">
                                                <input type="radio"> Default
                                                <span></span>
                                            </label>
                                            <label class="e-radio e-radio--bold">
                                                <input type="radio" checked="checked"> Checked
                                                <span></span>
                                            </label>
                                            <label class="e-radio e-radio--bold e-radio--disabled">
                                                <input type="radio" disabled="disabled"> Disabled
                                                <span></span>
                                            </label>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="e-radio-list">
                                            <label class="e-radio e-radio--bold e-radio-success">
                                                <input type="radio"> Success state
                                                <span></span>
                                            </label>
                                            <label class="e-radio e-radio--bold e-radio-danger">
                                                <input type="radio"> Danger state
                                                <span></span>
                                            </label>
                                            <label class="e-radio e-radio--bold e-radio-brand">
                                                <input type="radio"> Brand state
                                                <span></span>
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="e-separator e-separator--dashed"></div>

                            <div class="e-section-info">你可以在<code>.e-radio</code>上添加<code>.e-radio--solid</code>设置<code>radio</code>使用背景色</div>
                            <div class="e-section-content">
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="e-radio-list">
                                            <label class="e-radio e-radio--solid">
                                                <input type="radio"> Default
                                                <span></span>
                                            </label>
                                            <label class="e-radio e-radio--solid">
                                                <input type="radio" checked="checked"> Checked
                                                <span></span>
                                            </label>
                                            <label class="e-radio e-radio--solid e-radio--disabled">
                                                <input type="radio" disabled="disabled"> Disabled
                                                <span></span>
                                            </label>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="e-radio-list">
                                            <label class="e-radio e-radio--solid e-radio-success">
                                                <input type="radio"> Success state
                                                <span></span>
                                            </label>
                                            <label class="e-radio e-radio--solid e-radio-danger">
                                                <input type="radio"> Danger state
                                                <span></span>
                                            </label>
                                            <label class="e-radio e-radio--solid e-radio-brand">
                                                <input type="radio"> Brand state
                                                <span></span>
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                    <!--end::Form-->
                </div>
            </div>
            <!--end::Portlet-->
        </div>
    </div>
</div>
<!--str:: 全局js -->
<script src="/assets/plugins/global/plugins.bundle.js"></script>
<script src="/assets/js/demo1/scripts.bundle.js"></script>
<!--end:: 全局js -->
</body>
</html>